<template>
    <div class="container">

        <div class="side_wrap" @keyup.enter="handleLogin">

            <div class="login_wrap">

                <div class="wrap_body">
                    <div class="logo_wrap">
                        <img src="https://s3.ax1x.com/2020/12/22/rrDDPJ.png" alt="">
                    </div>

                    <div class="input_wrap">
                        <el-form ref="form" :model="form">
                            <el-input v-model="form.username" placeholder="请输入用户名/手机号" prefix-icon="el-icon-user"></el-input>
                            <el-input v-model="form.password" show-password placeholder="请输入密码" prefix-icon="el-icon-key"></el-input>

                            <el-button type="primary" @click="handleLogin" :loading="loading">登 录</el-button>
                        </el-form>
                    </div>

                    <div class="other_wrap">
                        <div class="remember">
                            <el-checkbox v-model="form.remember" class="chk">自动登录</el-checkbox>
                        </div>
                        <div class="forget">
                            忘记密码？
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div class="footer_wrap">
            <div class="copyright">
                <div>Copyright © 2020 北京视图更新科技有限公司</div>
                <div>京ICP备16010358号-2</div>
            </div>
        </div>

    </div>
</template>

<script>
import { Message } from 'element-ui'
export default {
    data() {
        return {
            loading: false,
            form: {
                username: null,
                password: null,
                remember: false
            }
        }
    },

    created() {
        let account = localStorage.getItem('account')
        account = account ? JSON.parse(account) : null
        if(account && account.remember) {
            this.form = account
        }
    },

    methods: {
        async handleLogin() {
            this.loading = true
            const res = await this.$store.dispatch('handleLogin', this.form).catch(error => {
                this.loading = false
            })
            if(res.status) {
                Message.success({
                    duration: 500,
                    message: res.msg,
                    onClose: ()=>{
                        if(this.form.remember) {
                            localStorage.setItem('account', JSON.stringify(this.form))
                        }
                        this.loading = false
                        this.$router.replace({ path: '/' })
                    }
                });
            } else {
                this.loading = false
                Message.error({message: res.msg});
            }

        }
    }
};
</script>

<style lang="scss" scoped>
@import './login1'
</style>
